<template>
  <div class="grey_bg">
    <navigate
      >查看测评结果

      <!-- <template v-slot:right>
        <div class="delete">删除</div>
      </template> -->
    </navigate>
    <div class="main_content">
      <div class="tabs_box">
        <div
          class="tabs_item"
          @click="selectTab(1)"
          :class="{ is_current: currentTab == 1 }"
        >
          查看测评结果
        </div>
        <div
          class="tabs_item"
          @click="selectTab(2)"
          :class="{ is_current: currentTab == 2 }"
        >
          查看答题情况
        </div>
        <!-- <div
          class="tabs_item"
          @click="selectTab(3)"
          :class="{ is_current: currentTab == 3 }"
        >
          查看报告解读
        </div> -->
      </div>
      <look-done-result v-show="currentTab == 1"></look-done-result>
      <look-done-statuation v-show="currentTab == 2"></look-done-statuation>
      <!-- <unscramble v-if="currentTab == 3"></unscramble> -->
    </div>
  </div>
</template>

<script>
import lookDoneResult from "@/views/core/lookDoneResult.vue";
import lookDoneStatuation from "@/views/core/lookDoneStatuation.vue";
import unscramble from "@/views/core/unscramble.vue";
export default {
  data() {
    return {
      currentTab: 1,
    };
  },
  components: {
    "look-done-result": lookDoneResult,
    "look-done-statuation": lookDoneStatuation,
    unscramble,
  },
  methods: {
    selectTab(value) {
      this.currentTab = value;
    },
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
}
.tabs_box {
  width: 340px;
  display: flex;
  margin: 0 auto;
}
.tabs_item {
  width: 170.14px;
  height: 34.72px;
  line-height: 34.72px;
  background: #ffffff;
  font-size: 15.28px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #333333;
}
.tabs_item:nth-child(1) {
  border-radius: 6.94px 0 0 6.94px;
}

.tabs_item:nth-child(2) {
  border-radius: 0 0px 0 0;
}

.tabs_item:nth-child(3) {
  border-radius: 0 6.94px 6.94px 0px;
}
.is_current {
  font-size: 15.28px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  color: #ffffff;
  width: 170.14px;
  height: 34.72px;
  background: linear-gradient(0deg, #ffffff -90%, rgba(255, 255, 255, 0) 100%),
    #0aa7f4;
}
</style>
